<template>
  <div>
    <el-dialog
      title="手动选择工具"
      :visible.sync="showManual"
      width="50%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="search-wrap" @keyup.enter="searchList('1')">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input v-model="description" placeholder="搜索需要的工具" />
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="searchList('1')">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="tools-list">
        <el-row :gutter="20">
          <div class="txt-title">当前共有{{ total }}个相关工具</div>
        </el-row>
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{color:'black'}">
          <el-table-column fixed prop="name" label="名称">
            <template slot-scope="scope">
              <p>名称：{{ scope.row.name }}
                <br>
                描述：{{ scope.row.description }}
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="chooseTools(scope.row)"
              >选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: center">
        <el-button
          type="text"
          :disabled="currentPage === 1"
          @click="previousPage"
        >
          上一页
        </el-button>
        <el-button
          type="text"
          :disabled="currentPage === totalPages"
          @click="nextPage"
        >
          下一页
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTools } from '@/api/workflow'
import { mapMutations } from 'vuex'
export default {
  name: 'ManualSelect',
  props: {
    showManualSelect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      description: '',
      tableData: [],
      total: 0,
      itemsPerPage: 5,
      currentPage: 1,
      showManual: this.showManualSelect
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.itemsPerPage)
    }
  },
  watch: {
    showManualSelect(newValue) {
      // 监听 props 变化并更新局部数据
      this.showManual = newValue
    }
  },
  methods: {
    ...mapMutations({
      setManualTools: 'tools/UPDATE_MANUALTOOLS'
    }),
    searchList(type) {
      if (!this.description) {
        this.$message.warning('请输入查询条件')
        return
      }
      if (type) {
        this.currentPage = 1
      }
      let params = { searchKey: this.description,pagesize:this.itemsPerPage,page:this.currentPage }
      getTools(JSON.stringify(params)).then((res) => {
        this.total = res.TotalNum
        this.tableData = res.tools
         /* 以下为前端分页实现 */
        // const startIndex = (this.currentPage - 1) * this.itemsPerPage
        // const endIndex = Math.min(startIndex + this.itemsPerPage, this.total)
        // this.tableData = []
        // for (let i = startIndex; i < endIndex; i++) {
        //   this.tableData.push(tempList[i])
        // }
        console.log('获取到的工具数据：', this.tableData)
      })
    },
    chooseTools(row) {
      // 存入store
      // this.setManualTools(JSON.stringify(row))
      console.log(row, '1111')
      this.$emit('choosedTools', JSON.stringify(row))
      this.cancel()
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.searchList()
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.searchList()
      }
    },
    cancel() {
      this.$emit('close_dialog', false)
    }
  }
}
</script>
<style    scoped>
.txt-title {
  font-size: 14px;
  font-weight: bold;
  margin: 15px 10px;
}
.search-wrap {
  margin-top: -20px;
}
</style>
